<#import "../common/layout.ftl" as layout/>
<#import "../common/dataTables.ftl" as dataTables/>
<#import "../common/modern-forms.ftl" as mform/>
<#import "../common/modal.ftl" as modal/>
<!DOCTYPE html>
<html>
<@layout.head title="用户信息">
    <@dataTables.head/>
    <@dataTables.buttons_head/>
    <@dataTables.select_head/>
    <@dataTables.editor_head/>
    <@dataTables.fixedHeader_head/>
    <@mform.head/>
    <@select.head/>
    <style>
        #detailTable1_wrapper{
            overflow: hidden;
        }
    </style>
</@layout.head>
<body>
<@layout.page>
    <div class="main-box">
        <div class="content">

            <div id="searchGroup" class="btn-group" style="position: absolute;">
                <span>新增时间</span>
                <input id="startdate" name="startdate" placeholder='请选择开始日期'/>
                <span>至</span>
                <input id="enddate" name="enddate" placeholder='请选择结束日期'/>
                <button class='"btn btn-blue btn-sm' onclick="refreshData()">
                    <i class="fa fa-search"></i>
                    <span>查询</span></button>
            </div>


            <!-- 表格 -->
                <div style="position: relative; top:40px; ">
                    <@dataTables.commonTable id="mainTable"/>
                </div>

                <!-- 按钮 -->
                <div id="btnGroup" class="btn-group" style="position: absolute; top:40px;">

                    <button id="btnAddTopMenu" type="button" class="btn btn-blue btn-sm" style="margin-left: 5px;"
                            onclick="refreshData();">
                        <i class="fa fa-search"></i> 查询
                    </button>

                </div>

        </div>
    </div>

    <@modal.editModal id="modal-detail" buttonId="btndetailSave"  buttonName="保存" width="1000px">
        <@mform.container id="editForm" >
            <input id="id" name="id" type="hidden"/>
            <@mform.input_text id='startTime' name='startTime' size=6 label='时间' placeholder='时间' icon='fa-edit' />
            <@mform.input_text id='state' name='state' size=6 label='状态' placeholder='状态' icon='fa-edit' />
            <@mform.input_text id='count' name='count' size=6 label='数量' placeholder='数量' icon='fa-edit' />
            <@mform.input_text id='name' name='name' size=6 label='名字' placeholder='名字' icon='fa-edit' />
        </@mform.container>
    </@modal.editModal>



</@layout.page>
<@layout.foot>
    <@dataTables.foot/>
    <@dataTables.buttons_foot/>
    <@dataTables.select_foot/>
    <@dataTables.fixedHeader_foot/>
    <@dataTables.editor_foot/>
    <@mform.foot/>
    <script src="${request.contextPath}/assets/js/jquery.serializejson.min.js?v=3653060703"></script>
    <script type="text/javascript">
        var typesMap = {
            <#list types as item>
            "${item.value}": "${item.name}",
            </#list>
        }
        var sourceMap = {
            <#list source as item>
            "${item.value}": "${item.name}",
            </#list>
        }
        var messageLevelMap = {
            <#list messageLevel as item>
            "${item.value}": "${item.name}",
            </#list>
        }
        //初始化时间
        var now = new Date();
        var begin = now.getFullYear() + "-" + (now.getMonth() + 1) + "-1";
        var endD;
        var nextMonth=now.getMonth()+1;
        var nextMonthFirstDay=new Date(now.getFullYear(),nextMonth,1);
        var oneDay=1000*60*60*24;
        endD= new Date(nextMonthFirstDay-oneDay);
        var end=endD.getFullYear() + "-" + (endD.getMonth()+1) + "-"+endD.getDate();
        $("#startdate").datetimepicker({
            language: "zh-CN",
            startView: 2,
            minView: 2,
            format: "yyyy-mm-dd",
            autoclose: true,
            initialDate: new Date(),
            todayBtn: true
        });
        $("#startdate").val(begin);
        $("#enddate").datetimepicker({
            language: "zh-CN",
            startView: 2,
            minView: 2,
            format: "yyyy-mm-dd",
            autoclose: true,
            todayBtn: true
        });
        $("#enddate").val(end);
        $("#startTime").datetimepicker({
            language: "zh-CN",
            startView: 2,
            minView: 2,
            format: "yyyy-mm-dd",
            autoclose: true,
            initialDate: new Date(),
            todayBtn: true
        });
        var columns = [
            {'sWidth': '200px', 'title': '时间', 'data': 'startTime'},
            {'sWidth': '100px', 'title': '状态', 'data': 'state'},
            {'sWidth': '200px', 'title': '数量', 'data': 'count'},
            {'sWidth': '300px', 'title': '名字', 'data': 'name'}

        ]
        var mainTable = $('#mainTable').winningTable({
            columns: columns,
            pageLength: 10,
            fixedHeader: false,
            searching: true,
            ordering: true,
            "columnDefs": [{
                "targets": [0],
                "visible": true
            }],
            buttons: [

            ],
            "order": [[ 1, "desc" ]],
            createdRow: function (row, data, dataIndex) {}
        });


        function refreshData() {
          /*  var data = {
                datas: JSON.stringify({
                    b_createTime: $("#startdate").val(),
                    e_createTime: $("#enddate").val()
                })
            }*/
            mainTable.queryData("${request.contextPath}/planLog/queryList");
        }







    </script>
</@layout.foot>
</body>
</html>